<template>
  <view class="message-page">
    <!-- 消息列表 -->
    <view class="message-list" v-if="dataList.length">
      <view class="message-item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item)">
        <view class="message-title">{{ item.title }}</view>
        <view class="message-content">{{ item.content }}</view>
        <view class="message-content">创建时间：{{ item.createTime||'-' }}</view>
        <view class="message-time">点击查看详情</view>
        <view class="message-arrow">
          <image src="/static/index/arrow.png" mode="aspectFit" />
        </view>
      </view>
      <!-- 这里有问题↓ -->
      <!-- <view class="message-line">{{ item.createTime || "-" }}</view> -->
      <uv-load-more :status="status" line height="60" />
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-if="!dataList?.length">
      <text>暂无记录</text>
    </view>
  </view>
</template>

<script setup>
  import { ref } from "vue";
  import { onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
  import { getMessageList } from "@/api/index";
  import { onShow } from "@dcloudio/uni-app";

  const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const dataList = ref([]); // 消息列表数据
  const total = ref(0);
  const status = ref("loadmore"); // 加载状态

  // 获取消息列表
  const getList = () => {
    status.value = "loading";
    getMessageList(queryParams.value)
      .then((res) => {
        if (res.code === 200) {
          dataList.value =
            queryParams.value.pageNum == 1
              ? res.rows
              : dataList.value.concat(res.rows) || [];
          total.value = res.total || 0;
          // 更新加载状态
          status.value = dataList.value.length >= total.value ? 'nomore' : 'loadmore'
        }
      })
      .finally(() => {
        setTimeout(() => {
          uni.stopPullDownRefresh();
        }, 500);
      });
  };

  // 跳转到消息详情
  const toDetail = (item) => {
    uni.navigateTo({
      url: `/pages/index/messageDetail?item=${JSON.stringify(item)}`,
    });
  };

  // 加载更多
  onReachBottom(() => {
    if (dataList.value.length < total.value) {
      queryParams.value.pageNum += 1;
      getList();
    }
  });

  // 下拉刷新事件
  onPullDownRefresh(() => {
    queryParams.value.pageNum = 1;
    uni.startPullDownRefresh();
    getList();
  });
  // 下拉刷新

  onShow(() => {
    getList();
  });
</script>

<style lang="scss" scoped>
  .message-page {
    background: #f3f3f3;

    .message-list {
      padding: 20rpx 20rpx 6rpx 20rpx;

      .message-line {
        width: 290rpx;
        border-radius: 50rpx;
        font-size: 26rpx;
        color: #9f9f9f;
        padding: 14rpx 20rpx;
        margin: 26rpx auto 0;
        background: #e7e7e7;
        text-align: center;
      }

      .message-item {
        background: #ffffff;
        border-radius: 20rpx;
        padding: 24rpx 30rpx;
        margin-bottom: 20rpx;
        position: relative;

        .message-title {
          font-size: 32rpx;
          color: #111827;
          font-weight: 500;
          margin-bottom: 16rpx;
        }

        .message-content {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 16rpx;
          line-height: 1.5;
        }

        .message-time {
          font-size: 28rpx;
          color: #6b7280;
          border-top: 1rpx solid #f5f5f5;
          padding-top: 16rpx;
        }

        .message-arrow {
          position: absolute;
          right: 30rpx;
          top: 80%;
          transform: translateY(-50%);

          image {
            width: 24rpx;
            height: 24rpx;
          }
        }

        &:active {
          opacity: 0.8;
        }
      }
    }

    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 200rpx;

      text {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
</style>